<template>
	<view class="checkin-content">
		<!-- 顶部 -->
		<view class="top-column">
			<view class="column-left" @click="handleBack">
				<img src="@/static/imgs/my/path_black.png" />
			</view>
			<view class="column-title">
				签到得积分
			</view>
		</view>
		<view class="left-star"></view>
		<view class="top-title">签到得积分</view>
		<view class="total-score">2068</view>
		<view class="check-date">
			<view class="top-row">
				<view class="left-box">
					<view class="star-golden">
					</view>
					<view class="r-title">已连续签到3天</view>
				</view>
				<view class="right-box">今日签到</view>
			</view>
			<view class="date-main">
				<view class="data-item" v-for="index in 7" :key="index">
					<view class="item-box">
						<view :style="index<5?'color:#5165f7':'color:#525469'">
							+{{index}}
						</view>
						<view v-if="index<5" class="ok-icon"></view>
						<view v-else class="no-title">6.10</view>
					</view>
					<view class="item-title">周一</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	const state = reactive({});

	const checked = reactive(true);

	function handleBack() {
		uni.navigateBack({
			delta:1
		})
	}
</script>

<style scoped lang="less">
	page {
		background: url("@/static/imgs/check-in-bg.png");
		background-size: 100% 100vh;
	}

	.checkin-content {
		position: relative;
	}

	.top-column {

		.column-left {
			position: fixed;
			left: 40rpx;
			top: 110rpx;
			width: 13rpx;
			height: 26rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.column-title {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 110rpx;
			font-size: 36rpx;
			color: #222222;
		}
	}

	.left-star {
		position: absolute;
		top: 190rpx;
		left: 18rpx;
		width: 84rpx;
		height: 84rpx;
		background: url("/static/imgs/star-golden.png");
		background-size: 100% 100%;
	}

	.top-title {
		position: absolute;
		top: 210rpx;
		left: 96rpx;
	}

	.total-score {
		position: absolute;
		left: 96rpx;
		top: 266rpx;
		font-size: 72rpx;
		display: flex;

		&:after {
			content: '';
			display: inline-block;
			margin-left: 28rpx;
			margin-top: 42rpx;
			width: 8rpx;
			height: 16rpx;
			background: url("/static/imgs/right-icon-grey.png");
			background-size: 8rpx 16rpx;
		}
	}

	.check-date {
		padding: 32rpx;
		position: absolute;
		top: 400rpx;
		left: 32rpx;
		width: calc(100% - 64rpx);
		height: 326rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.top-row {
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;

			.left-box {
				display: flex;

				.star-golden {
					margin-left: 10rpx;
					width: 114rpx;
					height: 100rpx;
					background: url("/static/imgs/crown-grey.png");
					background-size: 100% 100%;
				}

				.r-title {
					margin-top: 16rpx;
				}
			}

			.right-box {
				margin-top: 14rpx;
				width: 156rpx;
				height: 58rpx;
				line-height: 58rpx;
				border-radius: 8rpx;
				background-color: #fff5dc;
				color: #de7a1f;
				text-align: center;
				font-size: 28rpx;
			}
		}

		.date-main {
			display: flex;

			.data-item {
				margin-right: 20rpx;

				.item-box {
					padding-top: 10rpx;
					width: 72rpx;
					height: 98rpx;
					background-color: #f2f4f7;
					border-radius: 8rpx;
					text-align: center;
					font-size: 20rpx;
					color: #5165f7;

					.ok-icon {
						margin-top: 10rpx;
						margin-left: 20rpx;
						width: 32rpx;
						height: 32rpx;
						background: url("/static/imgs/icon-ok-blue.png");
						background-size: 32rpx 32rpx;
					}

					.no-title {
						margin-top: 10rpx;
						color: #b3b3b3;
						font-size: 20rpx
					}
				}

				.item-title {
					margin-top: 12rpx;
					text-align: center;
					font-size: 20rpx;
					color: #999999;
					text-align: center;
				}

				&:last-child {
					margin-right: 0;
				}

			}
		}
	}
</style>